<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情 - 在线购物商城</title>
    <link rel="stylesheet" href="../css/head.css">
    <link rel="stylesheet" href="../css/detail.css">
</head>
<body>

    <div class="header">
        <div class="header-content">
            <a href="#" class="logo">在线购物商城</a>
            <form class="search-box" action="" method="post">
                <input type="text" class="search-input" placeholder="请输入商品名称">
                <button class="search-btn">搜索</button>
            </form>
            <ul class="clearfix user-actions">
                <li>
                    <a href="">购物车</a>
                </li>
                <li>
                    <a href="">我的订单</a>
                </li>
                <li>
                    <a href="">个人中心
                        <ul class="downlist clearfix">
                            <li>
                                <a href="">修改个人信息</a>
                            </li>
                            <li>
                                <a href="">修改收货地址</a>
                            </li>
                            <li>
                                <a href="">退出登录</a>
                            </li>
                        </ul>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="container clearfix">
        <div class="product-gallery">
            <img src="path/to/laptop.jpg" alt="HP BookPro14" class="main-image">
        </div>

        <div class="product-info">
            <h1 class="product-title">
                <span class="promotion-tag">人气爆款</span>
                HP/惠普星BookPro14 酷睿13代i7轻薄便携女生办公学习2024新款笔记本电脑
            </h1>

            <div class="price-section">
                <div class="price-label">销售价</div>
                <div class="price">4515</div>
            </div>

            <div class="product-details">
                <div class="detail-item">
                    <div class="detail-label">商品名称：</div>
                    <div class="detail-content">HP星 Book Pro 14英寸笔记本电脑</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">生产厂家：</div>
                    <div class="detail-content">惠普（HP）电脑科技有限公司</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">商品介绍：</div>
                    <div class="detail-content">
                        <div class="product-description">
                            全新2024款HP星 Book Pro 14，采用最新第13代英特尔酷睿i7处理器，
                            搭载2.8K高清OLED屏幕，机身轻至1.29kg，纤薄至15.9mm。
                            内置16GB大内存和512GB高速固态硬盘，
                            为办公、学习、轻度创作供强劲性能支持。
                            长续航设计，支持65W快充技术，30分钟即可充电50%。
                            内置AI降噪功能，远程会议、在线课程更清晰。
                        </div>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">数量：</div>
                    <div class="detail-content" style="display: flex; align-items: center;">
                        <div class="quantity-controls">
                            <span class="quantity-btn" onclick="updateQuantity(-1)">-</span>
                            <input type="text" class="quantity-input" name="quantity" value="1" readonly>
                            <span class="quantity-btn" onclick="updateQuantity(1)">+</span>
                        </div>
                        <span class="stock-info">有货</span>
                    </div>
                </div>
            </div>

            <div class="action-buttons">
                <button class="buy-now">立即购买</button>
                <button class="add-to-cart">加入购物车</button>
            </div>
        </div>
    </div>
    <script>
        function updateQuantity(change) {
            const input = document.querySelector('.quantity-input');
            let value = parseInt(input.value) + change;
            if (value < 1) value = 1;
            if (value > 99) value = 99;
            input.value = value;
        }
    </script>
</body>
</html> 